<div style="margin-bottom: 1em">
    This story demonstrates the display of a color palette with <b>groups</b> defined
</div>
<div style="margin-bottom: 1em; padding:1em;background: {value}">You selected <b>{value}</b></div>

Normal: <ColorPickerInput bind:color="value" /> <br />

<hr />
<div style="margin-bottom: 1em; padding:1em;background: {value2}">You selected <b>{value2}</b></div>

With prepended & appended:
<ColorPickerInput
    bind:color="value2"
    prepend="{['#f2f3f0', '#c4d8dd','#e6e9e5','#eaeae5','#ffffff']}"
    append="{['#000000', '#ffffff']}"
/>

<hr />
<div
    style="margin-bottom: 1em; padding:1em;background: {palette[value3] || value3 || 'transparent'}"
>
    You selected <b>{palette[value3] ? `palette color ${value3}` : value3}</b>
</div>

With returnPaletteIndex
<ColorPickerInput
    bind:color="value3"
    prepend="{['#f2f3f0', '#c4d8dd','#e6e9e5','#eaeae5','#ffffff']}"
    returnPaletteIndex="{true}"
/>

<script>
    import ColorPickerInput from '../ColorPickerInput.html';
    import { groupedColorsTheme } from './lib/themeStore';

    export default {
        components: { ColorPickerInput },
        data() {
            return {
                value: '#82c6df',
                value2: '#ab7fb4',
                value3: 14
            };
        },
        store: () => groupedColorsTheme,
        helpers: { palette: groupedColorsTheme.get().themeData.colors.palette }
    };
</script>

<style>
    hr {
        border-top-color: #c4c4c4;
    }
</style>
